<template>
	<div style="width: 100%;padding-top:14px">
		<div class="document-right-header">
			<div class="document-right-header-left">
				<el-input size="medium" class="document-right-header-left-input" suffix-icon="el-icon-search"
					placeholder="搜索文档" v-model="listQuery.name" @change="queryClick"></el-input>
			</div>
			<div class="document-right-header-right">
				<div class="document-right-header-right-switch">
					<div :class="[switchType == 'row'?'switch-bg':'']" class="document-right-header-right-switch-item"
						@click="loadSwitch('row')">
						<i :class="[switchType == 'row'?'':'switch-color']"
							class="iconfont icon-hang document-right-header-right-switch-item-title"></i>
					</div>
					<div :class="[switchType == 'column'?'switch-bg':'']"
						class="document-right-header-right-switch-itemTwo" @click="loadSwitch('column')">
						<i :class="[switchType == 'column'?'':'switch-color']"
							class="iconfont icon-lietu document-right-header-right-switch-item-title"></i>
					</div>
				</div>
			<div>
				<el-button @click="addClick" style="margin-left: 20px;" type="primary">新增</el-button>

					<!-- <singlefileUpload ref="upload" @uploadSave="uploadSave">
						<template v-slot:openDialog>
							<span class="popover-content-top-title">上传附件</span>
						</template>
					</singlefileUpload> -->
			</div>
			</div>
		</div>
		<div style="position: relative;">
			<div class="document-right-content" style="margin-bottom: 30px;" v-if="switchType == 'row'">
				<row style="flex: 1;" :functionIndex="functionIndex" :data='documentForm' :listQuery="listQuery"></row>
			</div>
			<div class="document-right-content" v-if="switchType == 'column'">
				<div v-for="(item,index) in documentForm">
					<column class="document-right-content-column" :functionIndex="functionIndex" :listQuery="listQuery" :item="item" :key="index">
					</column>
				</div>
				<div v-if="documentForm.length == 0" style="flex: 1;display: flex;justify-content: center;align-items: center;">
					<el-empty description="暂无数据" ></el-empty>
				</div>
			</div>
		</div>
		<div>
			<pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
			            @pagination="loadList"/>
		</div>

		<!-- 新建文件夹 -->
		<!-- <folder ref="folder" @updateTree="updateTree"></folder> -->
	</div>
</template>

<script>
 import merge from 'webpack-merge'
	import {list} from '@/api/doc.js'
	import Vue from 'vue'
	import column from './column.vue'
	import row from './row.vue'
	import pagination from '@/components/Pagination/index.vue'
	import singlefileUpload from "../../../../components/upload/singlefileUpload";
	import {save} from '@/api/doc.js'
	export default {
		data() {
			return {
				projectform:"",
				documentType: '全部类型',
				switchType: 'column',
				documentForm:[],
				listQuery:{
					current:1,
					size:20,
					docType:"05",
					deleted:0,
					isUpdate:0,
					isMyCreate:0,
					name:'',
					docTypeId:"",
					// docSubtype:50
				},
				total:0,
				functionIndex:0
			}
		},
		components: {
			column,
			row,
			pagination,
			singlefileUpload
		},
		created() {
			this.projectform=this.form
			this.listQuery.docTypeId=this.$route.query.id
			this.loadList()
			// 修改更新list列表
			this.$EventBus.$on('updateDoc', (data)=>{
				var _this = this
				console.log(data)
				console.log('我进来了')
				if(data.type == 'del' || data.type == 'move' || data.type == 'removeIsMark' || data.type == 'recovery'){
					_this.documentForm.forEach(function(item,index){
						if(item.docId == data.data.docId){
							_this.documentForm.splice(index,1)
							_this.$forceUpdate()
							console.log(_this.documentForm)
						}
					})
				}else if(data.type == 'update'){
					_this.documentForm.forEach(function(item,index){
						if(item.docId == data.data.docId){
							_this.documentForm[index] = data.data
							_this.$forceUpdate()
						}
					})
				}
			})
		},
		beforeDestroy() {
			this.$EventBus.$off('updateDoc');
		},
		props: ['form'],
		watch: {
		  form: {
              handler(val, oldval) {
				  this.projectform=val
			 },
                // 深度观察监听
                 deep: true,
                 immediate:true
            },
		},
		methods: {
			addClick(){
			this.$emit('resetForm','contractAdd','合同')
			},
		uploadSave(val){
				let _this = this
				let data = {
					 docFilePath:[{fileNmae:val.name,fileUrl:val.url}],
         			 name:val.name,
					// name:val.name,
					// filePath:val.url,
					docType:'05',
					dirId:_this.projectform.dirId,
					docTypeId:this.$route.query.id,
					status:'00'
				}
				save(data).then(res=>{
					console.log(data)
					this.documentForm.push(res.data)
					_this.$refs.upload.sucessClick()
				})
			},

			// 刷新树
			updateTree(data){
				console.log(data)
				this.$EventBus.$emit('eventName',data)
			},
			// 查询list
			loadList(){
				var _this = this
				console.log(_this.listQuery)
				list(_this.listQuery).then(res=>{
					console.log(res)
					_this.documentForm = res.data.docData
					_this.total = res.data.total
				})
			},
			// 切换列表排列方式
			loadSwitch(data) {
				this.switchType = data
			},
			loadFolder(data) {
				this.$refs.folder.loadFolder(data)
			},
			// 名字搜索
			queryClick(data){
				console.log(data)
				this.resetClick()
				this.listQuery.name = data
				this.loadList()
			},
			// 重置listquery
			resetClick(){
				this.functionIndex = 0
				this.listQuery.deleted = 0
				this.listQuery.isUpdate = 0
				this.listQuery.isMyCreate = 0
				this.listQuery.current = 1
				this.listQuery.size = 10
				this.listQuery.docType = ''
				this.listQuery.dirId = ''
				this.listQuery.name = ''
			}
		}
	}
</script>

<style scoped>
	.document-right-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.document-right-header-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.document-right-header-left-select {
		width: 160px;
		margin-right: 10px;
	}

	.document-right-header-left-input {
		width: 220px;
	}

	.document-right-header-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 14px;
	}

	.document-right-header-right-switch {
		width: 72px;
		height: 36px;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
		box-sizing: border-box;
		margin-right: 20px;
	}

	.document-right-header-right-switch-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 36px;
		height: 36px;
		border: 1px solid #dadee3;
		border-right: none;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.document-right-header-right-switch-itemTwo {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 36px;
		height: 36px;
		border: 1px solid #dadee3;
		border-left: none;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.switch-bg {
		background-color: #677e9f;
		border-color: #677e9f;
	}

	.switch-color {
		color: #677e9f !important;
	}

	.document-right-header-right-switch-item-title {
		font-size: 14px;
		color: white;
	}

	.popover-content-top-title {
		color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.popover-content-top-title:hover {
		background-color: #f5f6f8;
	}

	.document-right-content {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20px;
	}

	.document-right-content-column {
		margin-bottom: 20px;
		margin-right: 20px;
	}
	.popover-content-top-title{
		background-color:rgb(44, 126, 248);;
		color: #fff;
		border-radius: 8px;
	}
	.popover-content-top-title:hover{
	    background-color:rgb(44, 126, 248);;
		color: #fff;
		border-radius: 8px;
	}
</style>
